<template>
  <div class="index-container">
    <div class="top">
      <el-row>
        <el-col :span="6" :offset="0">
          <div class="content icon">
            <div class="icon__left">
              <img src="@/assets/images/icon/project_2.png" class="img">
              <div class="icon__right">
                <div class="icon_title">申请项目</div>
                <div class="icon_content">
                  {{title.project}}
                  <span class="span">个</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :offset="0">
          <div class="content icon">
            <div class="icon__left">
              <img src="@/assets/images/icon/project_1.png" class="img">
              <div class="icon__right">
                <div class="icon_title">申请机构</div>
                <div class="icon_content">
                  {{title.unit}}
                  <span class="span">个</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :offset="0">
          <div class="content icon">
            <div class="icon__left">
              <img src="@/assets/images/icon/money_1.png" class="img">
              <div class="icon__right">
                <div class="icon_title">申请运维金额</div>
                <div class="icon_content">
                  {{title.apply_amount}}
                  <span class="span">万元</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" :offset="0">
          <div class="content icon">
            <div class="icon__left">
              <img src="@/assets/images/icon/money_1.png" class="img">
              <div class="icon__right">
                <div class="icon_title">核减金额</div>
                <div class="icon_content">
                  {{title.check_amount}}
                  <span class="span">万元</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="12" :offset="0">
        <pie-1 ref="pie1" class="view"></pie-1>
      </el-col>
      <el-col :span="12" :offset="0">
        <pie-2 ref="pie2" :unit-amount="unitAmount" :unit-all="unitAll" class="view"></pie-2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="0">
        <pie-3 ref="pie3" :unit-num="unitNum" :unit-all="unitAll" class="view"></pie-3>
      </el-col>
      <el-col :span="12" :offset="0">
        <pie-4 ref="pie4" :check-data="checkData" class="view"></pie-4>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12" :offset="0">
        <pie-5 ref="pie5" class="view"></pie-5>
      </el-col>
      <el-col :span="12" :offset="0">
        <pie-6 ref="pie6" class="view"></pie-6>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import Pie1 from './components/pie1.vue'
import Pie2 from './components/pie2.vue'
import Pie3 from './components/pie3.vue'
import Pie4 from './components/pie4.vue'
import Pie5 from './components/pie5.vue'
import Pie6 from './components/pie6.vue'
export default {
  name: '',
  components: {
    Pie1, Pie2, Pie3, Pie4, Pie5, Pie6,
  },
  props: {

  },
  data () {
    return {
      title: {},
      unitNum: [], //数量名
      unitAmount: [], //金额名
      unitAll: [], //单位数据
      checkData: [],//核减金额
    }
  },
  created () {

  },
  mounted () {
    this.init()
  },
  methods: {
    async init () {
      const title = await this.$http('findWholeList', {
        flag: true
      })
      this.title = title

      await this.unitInfo()
      this.$refs.pie2.init()
      this.$refs.pie3.init()
    },

    async unitInfo () {
      // 各单位运维资金与项目数量数据处理
      let res1 = await this.$http('viewUnit', {
      })
      let unitList = res1
      // 合并信息中心
      let xxNum = 0
      let xxAmount = 0
      // 相加，干掉
      unitList = unitList.filter(item => {
        if (item.NAME.slice(0, 8) == '沈阳市信息中心-') {
          xxNum = item.objCount + xxNum
          xxAmount = item.serviceAmout + xxAmount
        }
        return item.NAME.slice(0, 8) != '沈阳市信息中心-'
      })
      unitList.push({ serviceAmout: xxAmount.toFixed(4), objCount: xxNum, NAME: '沈阳市信息中心' })
      this.unitAll = unitList
      this.unitNum = [] //数量名
      this.unitAmount = [] //金额名
      // 排序，展示前5位
      let serviceAmout = this.$util.getOrderAsc(unitList, 'serviceAmout')
      serviceAmout.forEach((item, index) => {
        if (index < 5) {
          this.unitAmount.push({ value: item.serviceAmout, name: item.NAME })
        }
      })
      let objCount = this.$util.getOrderAsc(unitList, 'objCount')
      objCount.forEach((item, index) => {
        if (index < 5) {
          this.unitNum.push({ value: item.objCount, name: item.NAME })
        }
      })
    },
  },
  computed: {

  }
}
</script>
<style lang='scss' scoped>
.index-container {
  background-color: #f1f2f6;
  width: 100%;
}
.content {
  background-color: #fff;
  margin: 5px;
  padding: 10px;

  border-radius: 5px;
  &__notice {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
    margin: 0 auto;
    align-content: center;
    text-align: center;
  }
}

.icon {
  height: 100px;
  padding: 10px 15px;
  &__left {
    .img {
      position: absolute;
      top: 25%;
      height: 60px;
    }
  }
  &__right {
    float: right;
    .icon_title {
      text-align: center;
      font-size: 1.5rem;
    }
    .icon_content {
      font-size: 1.3em;
      text-align: right;
      margin-top: 20px;
      .span {
        font-size: 0.8em;
      }
    }
  }
}
.top {
  position: sticky;
  top: 0px;
  z-index: 999;
}
.view {
  border-radius: 5px;
  margin: 5px;
  background-color: #fff;
  width: calc(100% - 10px);
}
</style>
